<template>
  <div :class="prefixClass">
    <TreeFilter
      label="label"
      title="部门列表(单选)"
      :data="data"
      :defaultValue="treeFilterValue.departmentId"
      @change="changeTreeFilter"
    />
    <TreeFilter
      title="部门列表(多选)"
      multiple
      label="label"
      :data="data"
      :defaultValue="treeFilterValue1.departmentId"
      @change="changeTreeFilter1"
    />
    <el-card :class="`${prefixClass}__descriptions`">
      <h2>树形筛选器 🍓🍇🍈🍉</h2>
      <el-descriptions title="配置项 📚" :column="1" border>
        <el-descriptions-item label="requestApi">请求分类数据的 api</el-descriptions-item>
        <el-descriptions-item label="data">分类数据，如果有分类数据，则不会执行 api 请求</el-descriptions-item>
        <el-descriptions-item label="title">treeFilter 标题</el-descriptions-item>
        <el-descriptions-item label="id">选择的id，默认为 “id”</el-descriptions-item>
        <el-descriptions-item label="label">显示的label，默认为 “label”</el-descriptions-item>
        <el-descriptions-item label="multiple">是否为多选，默认为 false</el-descriptions-item>
        <el-descriptions-item label="defaultValue">默认选中的值</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="TreeFilterDemo">
import { ElMessage } from "element-plus";
import { TreeFilter } from "@/components";
import { useDesign } from "@/hooks";

const { getPrefixClass } = useDesign();
const prefixClass = getPrefixClass("tree-filter-demo");

interface Tree {
  id: number;
  label: string;
  children?: Tree[];
}

const treeFilterValue = reactive({ departmentId: "1" });
const changeTreeFilter = (val: string) => {
  ElMessage.success(`你选择了 id 为 ${val} 的数据🤔`);
  treeFilterValue.departmentId = val;
};

const treeFilterValue1 = reactive({ departmentId: ["11"] });
const changeTreeFilter1 = (val: string[]) => {
  ElMessage.success(`你选择了 id 为 ${JSON.stringify(val)} 的数据🤔`);
  treeFilterValue1.departmentId = val;
};

const data: Tree[] = [
  {
    id: 1,
    label: "Level one 1",
    children: [
      {
        id: 4,
        label: "Level two 1-1",
        children: [
          {
            id: 9,
            label: "Level three 1-1-1",
          },
          {
            id: 10,
            label: "Level three 1-1-2",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "Level one 2",
    children: [
      {
        id: 5,
        label: "Level two 2-1",
      },
      {
        id: 6,
        label: "Level two 2-2",
      },
    ],
  },
  {
    id: 3,
    label: "Level one 3",
    children: [
      {
        id: 7,
        label: "Level two 3-1",
      },
      {
        id: 8,
        label: "Level two 3-2",
      },
    ],
  },
];
</script>

<style lang="scss" scoped>
$prefix-class: #{$admin-namespace}-tree-filter-demo;

.#{$prefix-class} {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  height: 100%;

  &__descriptions {
    flex: 1;
    height: 100%;
  }
}
</style>
